<template>
  <div class="home">
    <AppHeader />
    <div class="movie-container">
      <div class="nav-wrapper">
        <div class="nav">
          <span 
            v-for="tab in tabs" 
            :key="tab.value"
            :class="{ active: currentTab === tab.value }"
            @click="switchTab(tab.value)"
          >
            <i :class="tab.icon" class="tab-icon"></i>
            {{ tab.label }}
            <em v-if="tab.value === 'now' && movieData.now">{{ movieData.now.length }}部</em>
          </span>
          <span 
            class="easter-egg-btn"
            @click="handleEasterEggClick"
            v-show="showEasterEgg"
          >
            <i class="fas fa-gamepad"></i>
            休闲一下
          </span>
        </div>
      </div>

      <div class="movie-list-container">
        <div v-if="isLoading" class="loading-state">
          <el-loading-component />
        </div>
        
        <transition-group 
          v-else
          name="fade" 
          mode="out-in"
          tag="div"
          class="movie-list"
        >
          <MovieCard 
            v-for="movie in movies" 
            :key="movie.id" 
            :movie="movie"
            @buy-ticket="handleBuyTicket"
          />
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MovieCard from '@/components/MovieCard.vue'
import qs from 'qs'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import AppHeader from '@/components/AppHeader.vue'

const router = useRouter()
const currentTab = ref('now')
const movieData = ref({
  now: [],
  coming: []
})
const clickCount = ref(0)
const showEasterEgg = ref(false)
const isLoading = ref(false)

const movies = computed(() => {
  return movieData.value[currentTab.value] || []
})

const switchTab = (tab) => {
  currentTab.value = tab
  const selectedTab = tabs.find(t => t.value === tab)
  if (selectedTab?.onClick) {
    selectedTab.onClick()
  }
}

const getMovies = async () => {
  if (isLoading.value) return
  try {
    isLoading.value = true
    const response = await axios.get(`${BASE_URL}/v1/movie/select/`)
    if (response.data.code === 2000) {
      const movies = Array.isArray(response.data.data.list) 
        ? response.data.data.list 
        : Array.isArray(response.data.data) 
          ? response.data.data 
          : [];
          
      movieData.value = {
        ...movieData.value,
        now: movies.map(movie => ({
          ...movie,
          id: movie.movieId || movie.id
        }))
      }
    } else {
      ElMessage.error(response.data.msg || '获取电影数据失败')
    }
  } catch (error) {
    console.error('获取电影数据错误:', error)
    ElMessage.error(error.response?.data?.msg || '网络请求失败，请稍后重试')
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  getMovies()
})

const handleComingClick = () => {
  clickCount.value++
  if (clickCount.value === 3) {
    showEasterEgg.value = true
    ElMessage.success('发现隐藏游戏！')
  }
  // 5秒后重置点击次数
  setTimeout(() => {
    clickCount.value = 0
  }, 5000)
}

const tabs = [
  { label: '正在热映', value: 'now', icon: 'fas fa-fire' },
  { 
    label: '即将上映', 
    value: 'coming', 
    icon: 'fas fa-clock',
    onClick: handleComingClick 
  }
]

const handleEasterEggClick = () => {
  router.push('/tetris')
}

const handleBuyTicket = (movie) => {
  router.push({
    path: '/cinema',
    query: {
      movieId: movie.id,
      movieName: movie.name,
      moviePoster: movie.poster
    }
  })
}
</script>

<style scoped>
.movie-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  margin-top: 30px;
}

.nav-wrapper {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

.nav {
  display: flex;
  gap: 20px;
  border-bottom: none;
  padding-bottom: 0;
}

.nav span {
  cursor: pointer;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  background: #f5f5f5;
}

.nav span:hover {
  background-color: #ff5f1610;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 95, 22, 0.1);
}

.nav span.active {
  color: #fff;
  background-color: #ff5f16;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(255, 95, 22, 0.3);
}

.nav span.active::after {
  display: none;
}

.nav span em {
  font-style: normal;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

.tab-icon {
  margin-right: 8px;
  font-size: 16px;
}

.movie-list-container {
  position: relative;
  min-height: 800px;
  margin-top: 20px;
}

.movie-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 25px;
  position: absolute;
  width: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

@media (max-width: 768px) {
  .nav span {
    padding: 10px 16px;
    font-size: 14px;
  }
  
  .movie-container {
    padding: 15px;
    margin-top: 20px;
  }
}

.easter-egg-btn {
  background: linear-gradient(45deg, #ff6b6b, #ff5f16) !important;
  color: white;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
